import { SetStateAction, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Col, Flex, Row } from 'antd'
import './style.less'
import classNames from 'classnames'
import { HsAdminInput, HsAdminSpin } from '@hs-admin/base-components'
import { getProductCategoryList, getWebsiteProductDetail } from '@/api/assetMaintain/dataProduct'
import { getProductItemSetList } from '@/api/assetMaintain/dataProduct/item_set'
import { getProductWebsiteList } from '@/api/assetMaintain/dataProduct/website'

interface Props {
  source: 'item_set' | 'website'
}
const MarketDataProduct: React.FC<Props> = (props: Props) => {
  const { source } = props
  const [tabList, settabList] = useState<any[]>([])
  const [tabIndex, settabIndex] = useState(0)
  const [tabItemInfor, settabItemInfor] = useState<any>({})
  const [keywords, setkeywords] = useState('')
  const [tabItemData, settabItemData] = useState<any[]>([])
  const navigate = useNavigate()
  const [loading, setloading] = useState(true)

  // 跳转-详情页
  const handleItemDetail = (item: any) => {
    if (item.type === 'website') {
      getWebsiteProductDetail({
        id: item.id
      }).then((res) => {
        window.open(res.url, '_blank')
      })
    } else {
      navigate(`/marketBasicData/themeDetail?id=${item.id}&name=${item.name}&description=${item.description}&source=product`)
    }
  }
  const tabChange = (index: number) => {
    settabIndex(index)
  }
  function callTabList() {
    getProductCategoryList({
      page: 1,
      page_size: 99,
      category: source
    }).then((res) => {
      settabList(res.items ?? [])
    })
  }
  const callTabItemList = () => {
    setloading(true)
    let callFn = getProductItemSetList
    if (source === 'website') {
      callFn = getProductWebsiteList
    }
    callFn({
      tags: tabItemInfor.name,
      page: 1,
      page_size: 99,
      keywords
    })
      .then((res) => {
        settabItemData(res.items ?? [])
      })
      .finally(() => {
        setloading(false)
      })
  }

  useEffect(() => {
    if (tabList.length) {
      settabItemInfor(tabList[tabIndex])
    }
  }, [tabList, tabIndex])
  useEffect(() => {
    if (tabItemInfor.name) {
      callTabItemList()
    }
  }, [tabItemInfor])

  useEffect(() => {
    callTabList()
  }, [])

  return (
    <div className="data-product-page-wrapper">
      {loading && <HsAdminSpin />}
      <div className="tab-box">
        {tabList.map((item, index) => (
          <div key={item.id} className={classNames({ active: tabIndex === index })} onClick={() => tabChange(index)}>
            {item.name}
          </div>
        ))}
      </div>
      <div className="top">
        <div className="top_text">
          <div>金融数据产品</div>
          <div className="top_text_tip" title={tabItemInfor.description}>
            {tabItemInfor.description}
          </div>
        </div>
        <div className="top_img"></div>
      </div>
      <div className="main-content">
        <Flex justify="space-between" align="center">
          <h2 className="font-bold">产品列表</h2>
          <HsAdminInput
            value={keywords}
            onPressEnter={callTabItemList}
            onChange={(e: { target: { value: SetStateAction<string> } }) => setkeywords(e.target.value)}
            className="w-80"
            placeholder="请输入产品名称"
          />
        </Flex>
        <br />
        <Row gutter={[12, 12]}>
          {tabItemData.map((item) => (
            <Col span={6} key={item.id} onClick={() => handleItemDetail(item)}>
              <div className="grid-item">
                <Flex align="center" justify="space-between">
                  <h3 className="font-bold break-words">{item.name}</h3>
                </Flex>
                <p className="show-text" title={item.description}>
                  {item.description}
                </p>
              </div>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  )
}

export default MarketDataProduct
